<!DOCTYPE html>
<html>
<head>
<title>Optical Path Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400" style="background-color: #FFFFFF;"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Parameters
const cx = 250;
const cy = 200;
const canvasR = 150;
const canvas_r = canvasR * 0.45; // Distance from O to P

// --- Drawing ---

// 1. Draw the main circle (sphere cross-section)
ctx.beginPath();
ctx.arc(cx, cy, canvasR, 0, 2 * Math.PI);
ctx.lineWidth = 2.5;
ctx.strokeStyle = 'black';
ctx.stroke();

// 2. Draw the dashed diameter line AOB
ctx.beginPath();
ctx.setLineDash([6, 4]);
ctx.moveTo(cx - canvasR - 10, cy);
ctx.lineTo(cx + canvasR + 10, cy);
ctx.lineWidth = 1.5;
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.setLineDash([]); // Reset dash

// 3. Draw the points O and P
const pointRadius = 4.5;

// Point O (Center)
ctx.beginPath();
ctx.arc(cx, cy, pointRadius, 0, 2 * Math.PI);
ctx.fillStyle = '#505050';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.stroke();

// Point P (Object)
const pX = cx - canvas_r;
const pY = cy;
ctx.beginPath();
ctx.arc(pX, pY, pointRadius, 0, 2 * Math.PI);
ctx.fillStyle = '#505050';
ctx.fill();
ctx.stroke();


// 4. Draw the radius line labeled 'R'
const angleR = -Math.PI / 4.5; // Angle for the radius line
const endRX = cx + canvasR * Math.cos(angleR);
const endRY = cy + canvasR * Math.sin(angleR);
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(endRX, endRY);
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();

// 5. Draw the arrowhead for 'R'
function drawArrow(ctx, fromx, fromy, tox, toy, headlen) {
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.save();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 7), toy - headlen * Math.sin(angle - Math.PI / 7));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 7), toy - headlen * Math.sin(angle + Math.PI / 7));
    ctx.stroke();
    ctx.restore();
}
drawArrow(ctx, cx, cy, endRX, endRY, 15);


// 6. Draw the labels
ctx.fillStyle = 'black';
ctx.font = 'italic 24px Times New Roman';
ctx.textAlign = 'center';

// Label 'O'
ctx.fillText('O', cx + 18, cy - 8);

// Label 'P'
ctx.fillText('P', pX - 18, cy - 8);

// Label 'A'
ctx.textAlign = 'left';
ctx.fillText('A', cx + canvasR + 15, cy + 8);

// Label 'B'
ctx.textAlign = 'right';
ctx.fillText('B', cx - canvasR - 15, cy + 8);

// Label 'R'
ctx.fillText('R', cx + canvasR * 0.55 * Math.cos(angleR) - 10, cy + canvasR * 0.55 * Math.sin(angleR) - 10);

// Label 'r'
ctx.textAlign = 'center';
ctx.fillText('r', cx - canvas_r / 2, cy + 30);

// Label 'n'
ctx.fillText('n', cx, cy + canvasR * 0.6);

</script>

</body>
</html>